<template name="apps">
	<view>
		
		<cu-custom bgColor="bg-blue">
			<block slot="content">流程应用</block>
		</cu-custom>
		<scroll-view scroll-y class="page">
			<template v-for="key in processMap.keys()">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class=" text-orange font-b">{{key}}</text>
					</view>
				</view>
				<view class="cu-list grid col-4 no-border">
				<view class="circle-button-box" @click="start(act)" v-for="(act, index) in processMap.get(key)" :key="index">
					<view class="cuIcon-calendar bg-blue text-white circle-button font-size-35"></view>
					<text class="ellipsis-description">{{act.name}}</text>
				</view>
				</view>
			</template>
			
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- 将应用中原有组件修改为流程应用组件
		 注释部分为原组件-->
		<!-- <scroll-view scroll-y class="page my-app">
			<view class="grid col-2 padding-sm">
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/apps/notification/notification" >
						<view class="padding radius text-center shadow-blur bg-blue">
							<view class="cuIcon-notice text-white circle-button font-size-35"></view>
							<view class="margin-top-sm text-Abc">通告</view>
						</view>
					</navigator>
				</view>
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/apps/mail/mail" >
						<view class="padding radius text-center shadow-blur bg-blue">
							<view class="cuIcon-mail text-white circle-button font-size-35"></view>
							<view class="margin-top-sm text-Abc">站内信</view>
						</view>
					</navigator>
				</view>
			</view>
			<view class="grid col-3 padding-sm" style="margin-top: -7px;">
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/samples/basics/home" >
						<view class="padding radius text-center shadow-blur bg-white">
							<text class="lg font-size-35 text-blue cuIcon-form"></text>
							<view class="margin-top-sm text-Abc">元素</view>
						</view>
					</navigator>
				</view>
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/samples/component/home" >
						<view class="padding radius text-center shadow-blur bg-white">
							<text class="lg font-size-35 text-blue cuIcon-list"></text>
							<view class="margin-top-sm text-Abc">组件</view>
						</view>
					</navigator>
				</view>
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/samples/plugin/home" >
						<view class="padding radius text-center shadow-blur bg-white">
							<text class="lg font-size-35 text-blue cuIcon-similar"></text>
							<view class="margin-top-sm text-Abc">扩展</view>
						</view>
					</navigator>
				</view>
				<view class="padding-sm">
					<navigator hover-class="none" url="/pages/samples/ucharts/ucharts" >
						<view class="padding radius text-center shadow-blur bg-white">
							<text class="lg font-size-35 text-blue cuIcon-rank"></text>
							<view class="margin-top-sm text-Abc">图表</view>
						</view>
					</navigator>
				</view>
				<view class="padding-sm">
					<view class="padding radius text-center shadow-blur bg-white">
						<text class="lg font-size-35 text-blue cuIcon-calendar"></text>
						<view class="margin-top-sm text-Abc">日历</view>
					</view>
				</view>
				<view class="padding-sm">
					<view class="padding radius text-center shadow-blur bg-white">
						<text class="lg font-size-35 text-blue cuIcon-phone"></text>
						<view class="margin-top-sm text-Abc">电话</view>
					</view>
				</view>
				<view class="padding-sm">
					<view class="padding radius text-center shadow-blur bg-white">
						<text class="lg font-size-35 text-blue cuIcon-activity"></text>
						<view class="margin-top-sm text-Abc">工作</view>
					</view>
				</view>
				<view class="padding-sm">
					<view class="padding radius text-center shadow-blur bg-white">
						<text class="lg font-size-35 text-blue cuIcon-hot"></text>
						<view class="margin-top-sm text-Abc">热点</view>
					</view>
				</view>
				<view class="padding-sm">
					<view class="padding radius text-center shadow-blur bg-white">
						<text class="lg font-size-35 text-blue cuIcon-safe"></text>
						<view class="margin-top-sm text-Abc">安全</view>
					</view>
				</view>

			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view> -->

	</view>
</template>

<script>
	
	export default {
		name: "apps",
		
		data() {
			return {
				processMap: new Map()
			};
		},
		//从这里都是流程应用新增组件 包括data里processMap
		async mounted() {
			
			let res = await this.$http.get('/app/extension/actCategory/treeData')
			let {data} = await this.$http.get('/app/flowable/process/list')
			this.processMap = new Map()
			res.data.treeData.forEach((item)=>{
				this.processMap.set(item.name, [])
			})
			let list = data.page.list
			list.forEach((item)=>{
				if(this.processMap.has(item.category)){
					let list = this.processMap.get(item.category)
					list.push(item)
				}else{
					//隐藏jeeplus自带的流程表单
					// this.processMap.set(item.category, [item])
				}
			})
			
			for(let [key,value] of this.processMap){
			    console.log(key,value);
			}
		},
		methods: {
			toApplyList (mail) {
				uni.navigateTo({
				   url: '/pages/workbench/task/ApplyList'
				})
			},
			toTodoList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/TodoList'
				})
			},
			toHistoryList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/HistoryList'
				})
			},
			toFlowCopyList (mail) {
				uni.navigateTo({
				    url: '/pages/workbench/task/FlowCopyList'
				})
			},
			start (row) {
				  // 读取流程表单
				this.$http.get('/app/flowable/task/getTaskDef', {
				  procDefId: row.id,
				  status: 'start'
				}).then(({data}) => {
				  if (data.success) {
					  let query = {procDefId: row.id, procDefKey: row.key, status: 'start', title: `发起流程【${row.name}】`, formType: data.flow.formType, formUrl: data.flow.formUrl, formTitle: `${row.name}`}
					  uni.navigateTo({
					     url: '/pages/workbench/task/TaskForm?flow='+JSON.stringify(query)
					  })
				  }
				})
		  }
		},
		//到这结束
		onShow() {
			console.log("success")
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
	.font-size-35{
		 font-size: 35px!important;
	}
	.my-app .padding-sm {
	    padding: 6px;
	}
	.grid .padding-sm .bg-white{
		    box-shadow: 0 1px 4px #f9f9f9, 1px 1px 40px rgba(0,0,0,.06);
	}
	.cu-list.card-menu {
	    overflow: hidden;
	    margin-right: 5px;
	    margin-left: 5px;
	    border-radius: 7px;
	}
	.cu-list.card-menu.margin-top-20 {
	    margin-top: -20px;
	}
	.cu-list.menu>.cu-item .content>uni-view:first-child {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    /* -webkit-align-items: center; */
	    /* align-items: center; */
	    display: inline-block;
	    margin-right: 5px;
	    width: 1.6em;
	    text-align: center;
	}
	.font-size-35{
		 font-size: 35px!important;
	}
	.circle-button{
		 width: 44px;
		 height: 44px;
		 border-radius: 18px;
		 padding-top: 4px;
	}
	.circle-button-box{
		  width: 25%;
		  margin-top: 10px;
		  display: -webkit-box;
		  display: -webkit-flex;
		  display: flex;
		  -webkit-box-orient: vertical;
		  -webkit-box-direction: normal;
		  -webkit-flex-direction: column;
		  flex-direction: column;
		  -webkit-box-align: center;
		  -webkit-align-items: center;
		  align-items: center;
		  -webkit-box-pack: center;
		  -webkit-justify-content: center;
		  justify-content: center;
		  box-sizing: border-box;
	}
	.font-b {
		  vertical-align: middle;
		  font-size: 18px;
		  font-weight: 500;
		  color: #3a3a3a;
	}
</style>
